<template>
  <div class="components-input-demo-presuffix" v-if="avalid">
    <!---->
    <a-input @click="openModal" :placeholder="placeholder" v-model="showText" readOnly :disabled="disabled">
      <a-icon slot="prefix" type="cluster" :title="title"/>
      <a-icon v-if="showText" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
    </a-input>

    <j-popup-onl-report
      ref="jPopupOnlReport"
      :code="code"
      :multi="multi"
      :groupId="uniqGroupId"
      @ok="callBack"
    />

  </div>
</template>

<script>
  import JPopupOnlReport from './modal/JPopupOnlReport'
  export default {
    name: 'JPopup',
    components:{
      JPopupOnlReport
    },
    props:{
      code:{
        type:String,
        default:"",
        required:false
      },
      field:{
        type:String,
        default:"",
        required:false
      },
      orgFields:{
        type:String,
        default:"",
        required:false
      },
      destFields:{
        type:String,
        default:"",
        required:false
      },
      width:{
        type:Number,
        default:1200,
        required:false
      },
      placeholder:{
        type:String,
        default:"请选择",
        required:false
      },
      value:{
        type:String,
        required:false
      },
      triggerChange:{
        type: Boolean,
        required: false,
        default: false
      },
      disabled:{
        type: Boolean,
        required: false,
        default: false
      },
      multi:{
        type: Boolean,
        required: false,
        default: false
      },
      /** 分组ID，用于将多个popup的请求合并到一起，不传不分组 */
      groupId: String,

    },
    data(){
      return {
        showText:"",
        title:"",
        avalid:true,
      }
    },
    computed: {
      uniqGroupId() {
        if(this.groupId){
          let { groupId, code, field, orgFields, destFields } = this
          return `${groupId}_${code}_${field}_${orgFields}_${destFields}`
        }
      }
    },
    watch: {
      value:{
        immediate:true,
        handler:function(val){
          if(!val){
            this.showText = ''
          }else{
            this.showText=val
          }
        }
      }
    },
    created(){
    },
    mounted(){
      if(!this.orgFields || !this.destFields || !this.code){
        this.$message.error("popup参数未正确配置!")
        this.avalid = false
      }
      if(this.destFields.split(",").length!=this.orgFields.split(",").length){
        this.$message.error("popup参数未正确配置,原始值和目标值数量不一致!")
        this.avalid = false
      }
    },
    methods:{
      openModal(){
        if(this.disabled === false){
          this.$refs.jPopupOnlReport.show()
        }
      },
      handleEmpty(){
        this.showText = ''
        let destFieldsArr = this.destFields.split(",")
        if(this.triggerChange){
          if(destFieldsArr.length>0){
            let res = {}
            for(let i=0;i<destFieldsArr.length;i++){
              res[destFieldsArr[i]] = ""
            }
            this.$emit("callback",res)
          }
        }else{
          this.$emit("input","")
        }
      },
      callBack(rows){
        let row = rows[0]
        let orgFieldsArr = this.orgFields.split(",")
        let destFieldsArr = this.destFields.split(",")
        let resetText = false
        if(this.field && this.field.length>0){
          this.showText = '';
          resetText = true
        }
        let res = {}
        if(orgFieldsArr.length>0){
          for(let i=0;i<orgFieldsArr.length;i++){
            if(!row[orgFieldsArr[i]] || row[orgFieldsArr[i]].length==0 || row[orgFieldsArr[i]] == 'null'){
              if(row[orgFieldsArr[i]]==0){
                res[destFieldsArr[i]] = '0'
              }else{
                res[destFieldsArr[i]] = ''
              }
            }else{
              res[destFieldsArr[i]] = row[orgFieldsArr[i]]+""
            }
          }
          if(resetText===true){
            this.showText = row[orgFieldsArr[destFieldsArr.indexOf(this.field)]]
          }
        }
        if(this.triggerChange){
          //v-dec时即triggerChange为true时 将整个对象给form页面 让他自己setFieldsValue
          this.$emit("callback",res)
        }else{
          //v-model时 需要传一个参数field 表示当前这个字段 从而根据这个字段的顺序找到原始值
         // this.$emit("input",row[orgFieldsArr[destFieldsArr.indexOf(this.field)]])
          this.$emit("input",this.showText,res)
        }
      }
    }
  }
</script>
<style scoped>
  .components-input-demo-presuffix .anticon-close-circle {
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
    font-size: 12px;
  }
  .components-input-demo-presuffix .anticon-close-circle:hover {
    color: #f5222d;
  }
  .components-input-demo-presuffix .anticon-close-circle:active {
    color: #666;
  }
</style>